<template>
  <div class="business-card-container">
    <div class="business-card-box">
      <div class="bg_img info-box">
        <div class="info">
          <!-- <avatar class="user-avatar" :avatar="userInfo.avatarUrl" /> -->
          <div class="user-info-content">
            <!-- 姓名、主营区域 -->
            <div class="user-detail-box">
              <div class="avatar-box" @click="editCLickHandler">
                <avatar size="large" :avatar="userInfo.avatarUrl" />
              </div>
              <div class="info" @click="editCLickHandler">
                <div class="username-box">
                  <span class="username-text">{{ username }}</span>
                </div>
                <div class="main-camp-view">
                  <p v-if="city">
                    <span>主营：</span>
                    <span>{{city}}</span>
                    <span>{{area | formatCounty}}</span>
                  </p>
                  <p v-else>请选择您的主营区域</p>
                  <svg
                    class="icon"
                    aria-hidden="true"
                    style="width:16px;height:16px;margin-right:16px;"
                  >
                    <use xlink:href="#icon-arrow-" />
                  </svg>
                </div>
              </div>
              <!-- <div class="action-btn" @click.stop="goTodolist">今日待办</div> -->
            </div>
          </div>
        </div>
        <!-- 快捷入口 -->
        <div class="shortcut-box">
          <div
            v-for="(img,index) in shortcutIcons"
            :key="index"
            class="head-img"
            @click="selectedShortcut(index)"
          >
            <svg class="icon" aria-hidden="true">
              <use :xlink:href="img.Icon" />
            </svg>
            <!-- <p class="grou1Icon-p" :class="index === 3?'grou1Icon':'grou1Icon-p'">{{img.title}}</p> -->
            <p class="grou1Icon-p">{{img.title}}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Avatar from 'COMP/Avatar'
import TagGroup from 'COMP/TagGroup'
import { mapGetters } from 'vuex'
import marketService from 'SERVICE/marketService'
export default {
  components: {
    TagGroup,
    Avatar
  },
  data: () => ({
    modifyImg: require('IMG/user/usercard_bg@2x.png'),
    crownIcon: require('IMG/user/newCardGroup5@2x.png'),
    discountIcon: require('IMG/user/SetmealGroup17@2x.png'),
    vipInfo: '',
    shortcutIcons: [
      { title: '我的报备', Icon: '#icon-wodebaobei' },
      { title: '我的写一写', Icon: '#icon-wodexieyixie' },
      { title: '培训资料', Icon: '#icon-peixunxueyuan' },
      // { title: '今日待办', Icon: '#icon-peixunxueyuan' },
      { title: '名片分享', Icon: '#icon-fenxiang-blue' }
    ],
    goType: false,
    majorName: [],
    city: '',
    area: '',
    vipText: '',
    listIndex: [],
    username: '',
    cur: 2,
    goTypeList: {
      1: 'welfare',
      2: 'welfare-desc'
    }
  }),

  props: {
    cardShareInfo: {
      type: Object,
      default: () => {}
    }
  },

  watch: {
    cardShareInfo(info) {
      let mojarRegion = (info && info.mojarRegion) || this.userInfo.mojarRegion || ''
      this.username = (info && info.agentName) || this.userInfo.name || ''
      if (mojarRegion) {
        let mojarRegionArr = mojarRegion.split('/').slice(-2)
        this.city = mojarRegionArr[0].replace('市', '')
        this.area = mojarRegionArr[1]
      }
    }
  },

  filters: {
    formatCounty(area) {
      if (area) {
        if (area === '片区' || area === '高新区') {
          return area
        } else if (area.indexOf('高新区') > -1) {
          return area.split('高新区').join('')
        } else if (area.indexOf('新区') > -1) {
          return area.split('新区').join('')
        } else if (area.indexOf('片区') > -1) {
          return area.split('片区').join('')
        } else {
          return area.split('区').join('')
        }
      }
    }
  },
  methods: {
    // 跳转VIP调整
    goVip() {
      if (this.vipInfo.expireTimestamp > +new Date()) {
        this.$router.push('/user/viplist')
      } else {
        this.$router.push('/user/myMember')
      }
    },
    // 跳转今日待办
    goTodolist() {
      this.$router.push('/dynamics/todoList')
    },
    // async getVipInfo() {
    //   let res = await marketService.vipInfo()
    //   console.log(res)
    //   this.vipInfo = res
    // },
    editCLickHandler() {
      this.$router.push('/user/edit')
    },

    showQrCode() {
      this.$emit('showPopup', '')
    },

    shareUserCard() {
      this.$emit('shareUserCard', '')
    },
    selectedShortcut(index) {
      this.$emit('selectedShortcut', index)
    }
  },
  computed: {
    ...mapGetters(['userInfo', 'userVipInfo']),
    dredgeText() {
      if (this.vipInfo) {
        let time = this.vipInfo.expireTimestamp
        let text = '立即续费'
        if (time > +new Date()) {
          text = '开通更多'
        }
        return text
      } else {
        return ''
      }
    },
    isVipInfo() {
      if (this.vipInfo) {
        let text = '开通VIP会员'
        if (this.goType == true) {
          text = '我的VIP会员'
        }
        return text
      } else {
        return ''
      }
      // return this.userVipInfo.isvip ? '我的vip会员':'开通VIP会员'
    },
    vipTimeInfo() {
      if (this.vipInfo) {
        // debugger
        let text = '楼盘开通不限量'
        let list = this.vipInfo.vipList
        this.goType = false
        // let goType = false ,//false 没过期，true,有过期
        let saveIndex = 0
        list.map((item, index) => {
          //部分过期
          if (!item.vipValid) {
            this.listIndex.push(index)
            this.goType = true
            saveIndex = index
          }
        })
        if (!this.goType) {
          if (this.vipInfo.vipList.length == 0) {
            return text
          }
          let cityList = []
          let curList = list.splice(0, 3)
          for (let j of curList) {
            cityList.push(j.city.replace('市', ''))
          }
          cityList = cityList.join(',')
          if (list.length > 0) {
            text = `已开通${cityList}等城市`
            this.goType = true
            this.vipText = '开通更多'
          } else {
            this.goType = true
            text = `已开通${cityList}`
            this.vipText = '开通更多'
          }
          return text
        } else if (this.goType && this.listIndex.length !== list.length && list.length !== 1) {
          let d = list[saveIndex].city.replace('市', '')
          text = `您开通的${d}VIP已过期请续费`
          this.cur = 1
          this.vipText = '续费'
          return text
        } else {
          this.vipText = '立即续费'
          this.cur = 1
          return (text = `您开通的城市VIP已全部到期`)
        }
      } else {
        return ''
      }
    },
    vipPackage() {
      return this.userVipInfo.packageStatus == 2 ? '任选10个盘' : this.userVipInfo.packageRemark
    },
    newLabelList() {
      return this.userInfo.labelList.length > 3 ? this.userInfo.labelList.slice(0, 3) : this.userInfo.labelList
    }
  }
}
</script>   
<style lang="less" scoped>
.business-card-container {
  > .business-card-box {
    > .info-box {
      height: 100%;
      background: #ffffff;
      > .info {
        > .user-info-content {
          > .user-detail-box {
            display: flex;
            align-items: center;
            .avatar-box {
              padding: 24px 0px 24px 16px;
            }
            .info {
              margin-left: 10px;
              flex: 1;
              display: flex;
              flex-direction: column;
              justify-content: center;
            }
            .action-btn {
              width: 77px;
              height: 30px;
              background: linear-gradient(90deg, rgba(0, 158, 230, 1) 0%, rgba(0, 122, 230, 1) 100%);
              box-shadow: 0px 3px 3px 0px rgba(0, 122, 230, 0.15);
              border-radius: 15px;
              font-size: 12px;
              font-weight: 400;
              color: rgba(255, 255, 255, 1);
              line-height: 30px;
              text-align: center;
              margin-right: 16px;
            }
            div {
              > .username-box {
                font-size: 20px;
                font-weight: 600;
                color: #0d1b33;
                > .username-edit-icon {
                  color: rgba(255, 255, 255, 0.15);
                }
              }
              > .main-camp-view {
                margin-top: 7px;
                color: #333;
                font-size: 12px;
                margin-right: 16px;
                display: flex;
                align-items: center;
                width: 100%;
                right: 16px;
                justify-content: space-between;
                span {
                  margin-right: 4px;
                }
              }
            }
          }
        }
      }
      > .shortcut-box {
        display: flex;
        justify-content: space-around;
        margin-bottom: 5px;
        font-size: 0px;
        .head-img {
          margin-left: 16px;
          height: 60px;
          width: 65px;
          margin-right: 10px;
          text-align: center;
          .icon {
            height: 24px;
            width: 24px;
          }
          > .grou1Icon-p {
            font-size: 12px;
            font-weight: 400;
            color: #13284d;
            margin-top: 6px;
          }
          > .grou1Icon {
            color: #e7602e;
          }
        }
      }
    }
  }

  > .business-status-title {
    font-size: 20px;
    font-weight: 600;
    color: rgba(51, 51, 51, 1);
    padding: 5px 16px 15px !important;
  }

  > .business-status-box {
    background-color: #ffffff;
    width: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 10;
    box-sizing: content-box;
    > div {
      position: relative;
      height: 80px;
      line-height: 80px;
      background: #ffffff;
      border-radius: 3px;
      margin-top: 6px;
      > img {
        margin: 18px 10px;
        width: 46px;
        height: 46px;
      }
      .info-title {
        position: absolute;
        top: 16px;
        left: 66px;
        font-size: 18px;
        font-weight: 600;
        color: #1a2733;
        line-height: 1.5;
      }
      .info-desc {
        position: absolute;
        top: 43px;
        left: 66px;
        font-size: 12px;
        font-weight: 400;
        color: #999999;
        line-height: 22px;
      }
      .info-btn {
        position: absolute;
        top: 24px;
        left: 71%;
        line-height: 22px;
        .btn {
          width: 80px;
          height: 32px;
          border: none;
          border-radius: 16px;
          color: #66421f;
          box-shadow: 2px 2px rgba(225, 161, 85, 0.4);
          font-size: 12px;
          background: linear-gradient(90deg, rgba(255, 209, 116, 1) 0%, rgba(215, 145, 75, 1) 100%);
        }
      }
    }
    > .status-info-left {
      > .info-desc {
        font-size: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}
</style>
